<template>
	<view>
		<view class="operation-danger">
			<view class='content'>
				<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);"  @scrolltolower="loadMore">
					<view class='danger-item' v-for="(item,index) in list">
						<view class='top'>
							<view class='left'>
								危险点
							</view>
							<view class='right'>
								<view>
									{{item.hazard}}
								</view>
								<view class='right-img'>
									<img src='../../../../static/icon/3.png' alt="1"  v-if="item.isPerformed==1"/>
									<img src='../../../../static/icon/2.png' alt="1"  v-else/>
								</view>
							</view>
						</view>
						<view class='bottom'>

							<view class='left'>
								预控措施
							</view>
							<view class='right'>
								<view>
									{{item.controlMeasure}}
								</view>

							</view>

						</view>
					</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		getDangerPage
	} from '@/api/operationPicket.js'
	export default {
		data() {
			return {
			   current:1,
			   size:10,
			   pages:1,
			   src: '',
			   clickTimes: 0,
			   textRadio: '点击开始录音，再点击停止',
			   list:[]
			}
		},
		props:{
			otId:{
			   type:String
			}
		},
		components: {},
		mounted() {
			this.getDangerList()
		},
		methods: {
			/*
			 * 危险点预控
			 **/
			getDangerList(){
				getDangerPage({
					objId: this.otId,
					objNo:'OT',
					current: this.current,
					size:this.size
				}).then(res => {
					this.current++
					this.list = this.list.concat(res.result.records) 
					this.pages = res.result.pages
				})
			},
			// 加载更多
			loadMore(){
				const {current,pages} = this
				if(current<=pages) {			
					this.getDangerList()
				}
			}
		}
	}
</script>

<style lang="scss">
	.operation-danger {

		.content {
			box-sizing: border-box;
			color: #333;
			font-size: 25upx;

			.danger-item {
				background-color: #fff;
				border-radius: 5upx;
				margin-top: 20upx;
				padding-right: 15upx;

				.top {
					display: flex;
					align-items: ctenter;
					width: 100%;

					.left {
						flex: 1;
						padding: 25upx 0;
						border-right: 1px solid#eee;
						border-bottom: 1px solid#eee;
						text-align: center;
					}

					.right {
						flex: 3;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 5upx 0 5upx 25upx;
						border-bottom: 1px solid#eee;

						.right-img {
							text-align: right;
						}

						img {
							width: 25%;
						}

					}
				}

				.bottom {
					display: flex;
					align-items: ctenter;
					width: 100%;

					.left {
						flex: 1;
						padding: 25upx 0;
						border-right: 1px solid#eee;
						text-align: center;
					}

					.right {
						flex: 3;
						padding: 5upx 0 5upx 25upx;
						display: flex;
						align-items: center;

					}
				}

			}

			.server-view {
				display: flex;
				width: 100%;
				color: #999;
				text-align: center;
				position: fixed;
				bottom: 20%;
				left: 0%;

				.left {
					flex: 1;

					img {
						width: 50%;
					}
				}

				.right {
					flex: 1.5;

					img {
						width: 33%;
					}
				}

				.img-c {}
			}


		}

	}
</style>
